

// 竞彩足球样式
@import '../theme.less';


// 玩法弹窗和赛事筛选
.method-list,.game-list{
  background: white;
  padding: @space-normal;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .method-list-item,.game-list-item{
    width: 30%;
    margin: 1.6%;
    border:1px solid @color-back-red;
    padding: @space-base 0;
    color: @color-font-red;
    font-size: @font-size3;
    margin-bottom: @space-normal;
    text-align: center;
    border-radius: @border-radius-base;
  }

 .method-list-item:active, .game-list-item:active, .method-list-item.item-active,.game-list-item.item-active{
    background: @color-back-red;
    color: white;
  }
}

.game-list{
  padding: 0;
  .game-list-item{
    width: 46%;
    margin: 2%;
  }
}


// 购彩列表
.list-wrap{
  .am-accordion-header{
    font-size: @font-size3 !important;
    color: @color-font-gray !important;
    background: @color-back-gray3 !important;
  }
}
.list{
  display: flex;
  padding: @space-middle @space-base;
  border-bottom:1px solid @border-color-base;
  .list-left{
    width: 20%;
    font-size: @font-size1;
    color:@color-font-gray2;
    .flex-col-center;
  }
  .list-right{
    flex: 1;
    .title-bar{
      display: flex;
      // padding:@space-middle 0;
      span:first-child{
        width: 1.5rem;
        font-size: @font-size0;
        color:@color-font-gray2;
        padding:@space-sm;
        .flex-col-center;
      }
      span:last-child{
        flex: 1;
        text-align: center;
        font-size: @font-size6;
        color: @color-font-black;
        .flex-col-center;
      }
    }
    .body{
      display:flex;
      border:1px solid @border-color-base;
      .body-right{
        width: 2.5rem;
        .flex-col-center;
      }
      .body-left{
        flex: 1;
        display: flex;
        flex-direction: column;
        .body-left-row{
          display: flex;
          flex: 1;
          border-bottom:1px solid @border-color-base;
          &:last-child{
            border-bottom:0;
          }
          .row-title{
            width: 1.5rem;
            font-size: @font-size0;
            border-right:1px solid @border-color-base;
            padding:@space-sm;
            .flex-col-center;
          }
          .row-title.ltr-orange-red{
            color:white;
          }
          .row-content{
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            .row-item{
              flex: 1;
              text-align: center;
              font-size: @font-size2;
              padding:@space-sm;
              border-right:1px solid @border-color-base;
              color: @color-font-black;
              .flex-col-center;
              flex-direction: row;
              span:last-child{
                color:@color-font-gray2;
                margin-left:@space-sm;
                letter-spacing: 1px;
              }
            }
            .row-item.ltr-orange-red{
              color:white;
              span:last-child{
                  color:white;
                }
            }
          }
        }
      }
    }
  }
}


.jczq-footer{
  display: flex;
  height: 100%;
  overflow: hidden;
  .left-icon{
    .flex-col-center;
    padding: @space-base @space-middle;
    img{
      max-width: 2.2rem;
      max-height: 2.1rem;
    }
  }
  .right-content{
    padding: @space-sm;
    padding-left: @space-base;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    >p:first-of-type{
      color: @color-font-black;
      font-size: @font-size5;
    }
    >p:last-of-type{
      color:@color-font-gray2;
      font-size: @font-size2;
    }
  }
}